<template>
    <div class="photoinfo-container">
        <h3> {{photoinfo.title}} </h3>
        <p class="subtitle">
            <span>发表时间 {{photoinfo.add_time | dateFormat() }} </span>
            <span>点击 {{photoinfo.click}} 次</span>

            <hr>
            <!-- 缩略图区域 -->

                <vue-preview
                    :list="list"
                    :thumbImageStyle="{width: '80px', height: '80px', margin: '10px', boxShadow: '2px 2px 8px #999'}"
                    :previewBoxStyle="{border: '1px solid #eee'}"
                    :tapToClose="true"
                    class="thumb"
                />

            <!-- 图片内容区域 -->
            <div class="content" v-html="photoinfo.content"></div>

            <!-- 评论子组件 -->
            <comment-box :id="this.id"></comment-box>
        </p>
    </div>
</template>

<script>
import comment from '../subcompontents/comment.vue';
export default {
    data() {
        return {
            id: this.$route.params.id, // 从路由中获取到图片id
            photoinfo: [], // 图片详情
            list: [] // 缩略图的数组
        }
    },
    components: {
        'commentBox': comment
    },
    created () {
        this.getPhotoInfo();
        this.getThumbs();
    },
    methods: {
        getPhotoInfo () {
            this.$axios.get('/api/getimageInfo/' + this.id).then(result => {
                if (result.data.status === 0) {
                    this.photoinfo = result.data.message[0];
                }
            });
        },
        getThumbs () {
            this.$axios.get('/api/getthumimages/' + this.id).then(result => {
                if (result.data.status === 0) {
                    // 循环每个图片数据,不全图片的宽和高
                    result.data.message.forEach(item => {
                        item.w = 600;
                        item.h = 400;
                    });
                    // 把完成的数据保存到list 中
                    this.list = result.data.message
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.photoinfo-container {
    padding: 3px;
    h3 {
        font-size: 15px;
        color: #26a2ff;
        text-align: center;
        margin: 15px 0;
    }
    .subtitle {
        display: flex;
        justify-content: space-between;
        font-size: 13px;
    }
    .content {
        font-size: 13px;
        line-height: 30px;
    }
    .thumb {
        margin: 10px;
        box-shadow: 0 0 8px #999;
        img:hover {
            width: 85px;
            height: 85px;
        }
    }
}
</style>